<template>
  <div class="header">
    <div class="logo" @click="toHome">
      <img src="@/assets/images/logo.png" alt="" />
    </div>
    <div class="menu">
      <el-menu
        default-active="1"
        mode="horizontal"
        text-color="#000"
        menu-trigger="click"
      >
        <el-sub-menu index="2" @click="toHome">
          <template #title>首页</template>
          <el-menu-item index="2-1" @click="roadCondition"
            >实时路况</el-menu-item
          >
          <el-menu-item index="2-2" @click="heatMap">热力图</el-menu-item>
          <!-- popup弹框 -->
          <el-menu-item index="2-4" @click="popEvent">查事件</el-menu-item>
          <el-menu-item index="2-5" @click="popMonitor">查监控</el-menu-item>
          <el-sub-menu index="2-3" @click="toHome">
            <template #title>工具箱</template>
            <el-menu-item index="2-3-1" @click="measureMap('LineString')"
              >测量距离</el-menu-item
            >
            <el-menu-item index="2-3-2" @click="measureMap('Polygon')"
              >测量面积</el-menu-item
            >
            <el-menu-item index="2-3-3" @click="imageExport"
              >导出图片</el-menu-item
            >
            <el-menu-item index="2-3-4" @click="pdfExport"
              >导出PDF</el-menu-item
            >
            <el-menu-item index="2-3-5" @click="closeMeasure"
              >关闭测量</el-menu-item
            >
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="3" @click="toMonitor">视频监控</el-menu-item>
        <el-sub-menu index="4">
          <template #title>事件管理</template>
          <el-menu-item index="4-1" @click="toEvent">管理事件</el-menu-item>
          <el-menu-item index="4-2" @click="addEvent">添加事件</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="5" @click="toNotice">公告管理</el-menu-item>

        <el-menu-item index="6" @click="toUser" v-if="store.user.type == 2"
          >用户管理</el-menu-item
        >
      </el-menu>
    </div>
    <div class="search">
      <el-input
        placeholder="事件查询"
        prefix-icon="Search"
        v-model.trim="searchContent"
        @keyup.enter="searchEvent"
        clearable
      />
      <el-button type="primary" @click="searchEvent">搜索</el-button>
    </div>
    <div class="person">
      <span class="who">{{ username }}</span>
      <el-dropdown>
        <span class="name">
          <i class="iconfont icon-normal" v-if="type == 0"></i>
          <i class="iconfont icon-admin" v-else></i>
          <el-icon>
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="updateUser">修改信息</el-dropdown-item>
            <el-dropdown-item @click="handleExitLogin"
              >退出登录</el-dropdown-item
            >
            <el-dropdown-item divided @click="handleExit"
              >注销账户</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <el-dialog v-model="dialogVisible" title="修改信息" width="30%" draggable>
      <el-form
        ref="userFormRef"
        :model="userForm"
        :rules="rules"
        label-position="top"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userForm.password" type="password" show-password />
        </el-form-item>
        <el-form-item>
          <el-button @click="submitForm(userFormRef)">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue"
//导入信息提示框
import { ElMessage } from "element-plus"
import { useUserStore } from "../stores/users"
//导入用户信息的hook
import { useUserMsg } from "./useUserMsg"
//导入修改用户信息的hook
import { useUpdateUser } from "./useUpdateUser"
import router from "../router"
const { dialogVisible, updateUser, userForm, rules, submitForm, userFormRef } =
  useUpdateUser()
const { username, type, handleExit, handleExitLogin } = useUserMsg()
const store = useUserStore()
const emit = defineEmits([
  "road-condition",
  "heat-map",
  "measure-map",
  "close-measure",
  "image-export",
  "pdf-export",
  "search-event",
  "event-pop",
  "monitor-pop",
])
//发送显示路况事件
function roadCondition() {
  // router.push("/home")
  emit("road-condition")
}
//发送热力图事件
function heatMap() {
  emit("heat-map")
  // router.push("/home")
}
//发送测量距离函数
function measureMap(type) {
  emit("measure-map", type)
}
//发送关闭测量函数
function closeMeasure() {
  emit("close-measure")
}
//发送导出成图片函数
function imageExport() {
  emit("image-export")
}
//发送导出pdf函数
function pdfExport() {
  emit("pdf-export")
}
//跳转到监控
function toMonitor() {
  router.push("/monitor")
}
//跳转到事件页面
function toEvent() {
  router.push("/event")
}
//跳转到添加事件页面
function addEvent() {
  router.push("/middle/addevent")
}
//跳转到用户管理
function toUser() {
  router.push("/users")
}
//跳转到公告管理
function toNotice() {
  router.push("/notice")
}
//返回首页
function toHome() {
  router.push("/home")
}
//查询事件模块
// 定义输入框绑定内容
const searchContent = ref("")
// 发送输入框点击事件
function searchEvent() {
  if (searchContent.value == "") {
    ElMessage.error("输入框内容为空,请重新输入")
  } else {
    emit("search-event", searchContent)
  }
}
//popup弹窗
/* 发送事件pop弹窗 */
function popEvent() {
  emit("event-pop")
}
/* 发送监控pop弹窗 */
function popMonitor() {
  emit("monitor-pop")
}
</script>
<style lang="stylus" scoped>
@import 'http://at.alicdn.com/t/c/font_3780769_43pfliowj4o.css'
.header
  height 8vh
  box-sizing border-box
  border-bottom 2px solid #1a8ce2
  cursor pointer
  .logo
    float left
    width 160px
    height 100%
    padding-bottom 2px
    box-sizing border-box
    margin-left 10px
    img
      width 100%
  .menu
    padding-left 200px
    height 100%
    .el-menu
      height 100%
      padding-left 200px
      .el-menu-item.is-active
        color #0151ae!important
      .el-menu-item
        border none
      >>>.el-sub-menu .el-sub-menu__title
        border none
        color #000
      >>>.el-sub-menu.is-active .el-sub-menu__title
        color #0151ae!important
  .search
    position absolute
    top 14px
    right 250px
    .el-input
      width 180px
      margin-right 10px
    .el-button
      display inline-block
  .person
    position absolute
    top 6px
    right 0px
    width 200px
    .el-dropdown
      height 100%
      float right
      .name
        margin-right 30px
        .iconfont
          font-size 45px
          color #192887
    .who
      position absolute
      right 100px
      font-size 20px
      top 10px
</style>
